<template>
	<block>
		<view class="search">
			<view class="search-wrapper">
				<u-icon name='search' color="#ffdf00" size=45></u-icon>
				<input :value="searchWord" type="text" focus="true" placeholder="请输入搜素内容" @input="input" />
			</view>
			<view class="search-btn" @tap="search">搜索</view>
		</view>
		<view v-show="dbName == 'emjio-list'">
			<view class="itemListBgView" v-for="(item,index) in list" :key="index" @click="navigateToDetail(item)">
				<view class="doutuTitleBgView">
					<view v-if="index < 3"
						style="align-items: center;display: flex;background: linear-gradient(to right,#FDEFB7,#ffffff);padding: 1px 27px 1px 0;">
						<image style="width: 30px;height: 15px;" src="../../static/icon/detail_album_vip.png" mode="">
						</image>
						<view
							style="font-size: 26rpx;color: black;font-weight: 400;flex-wrap: nowrap;margin-left: 3px;">
							{{item.title}}
						</view>
					</view>
					<view v-else style="align-items: center;display: flex;">
						<view style="font-size: 30rpx;color: black;font-weight: 500;">
							{{item.title}}
						</view>
					</view>
					<view style="font-size: 24rpx;color: #A4A4A4;">
						更多
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
				</view>
				<view class="doutuBgView">
					<view @click="detail(item.id)" v-for="(item, index) in item.imgs" :key="index">
						<image class="iconView" :src="item" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus" :font-size="24" :margin-top="30" :margin-bottom="20" color="#B8B8B8" />
		</view>
		</view>
	</block>
</template>

<script>
	import API from '../../api/api.js';

	export default {
		data() {
			return {
				dbName: null,
				searchKey: null,
				loadShow: false,
				searchWord: null,
				image_height: 400,
				image_widht: 220,
				pageIndex: 1,
				pageSize: 10,
				list: []
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.dbName = "emjio-list"
			this.searchKey = "tag"

			var systemInfo = uni.getSystemInfoSync();
			this.image_widht = (systemInfo.screenWidth - 10 - 10 - 10 - 10) / 3
			this.image_height = this.image_widht * 400 / 220
		},
		onReachBottom() {
			let that = this;
			if (that.loadStatus == 'nomore') return
			that.pageIndex += 1;
			that.search()
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			input(tt) {
				console.log(tt)
				this.searchWord = tt.detail.value
				this.pageIndex = 1
			},
			search() {
				if (this.searchWord != null) {
					let that = this;
					API.search(this.pageIndex, this.pageSize, this.searchWord, this.searchKey, this.dbName).then(res => {
							if(this.dbName == 'emjio-list'){
								for (var i in res) {
									var tmp = res[i]
									tmp['imgs'] = JSON.parse(tmp['imgs'])
									if (tmp['imgs'].length > 4) {
										tmp['imgs'] = tmp['imgs'].slice(0, 4)
									}
								}
							}
							if (that.pageIndex == 1) {
								that.list = res;
								that.loadStatus = 'loadmore'
							} else {
								that.list = that.list.concat(res);
							}

							if (res.length == that.pageSize) {
								that.loadStatus = 'loadmore'
							} else {
								that.loadStatus = 'nomore'
							}
						})
						.catch(err => {
							console.log(err)
							this.pageIndex = 1
						})
				}
			},
			navigateToDetail(res) {
				console.log('---', res)
				if (this.dbName == 'wallpaper-list') {
					console.log(res)
					var t = res.imageUrl,
						title = res.name,
						_id = res._id;
					uni.navigateTo({
						url: "/pagesOther/dynamicdetail/dynamicdetail?src=" +
							encodeURIComponent(t) + "&title=" + title + "&type=image" + "&_id=" + _id
					});
				}else {
					uni.navigateTo({
						url: '../../pagesOther/emjioDetail/emjioDetail?item=' + encodeURIComponent(JSON.stringify(
							res))
					})
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.search {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 20rpx;
	}

	.search-wrapper {
		border: 2rpx solid rgba(255, 199, 0, 0.5);
		margin-left: 20rpx;
		margin-right: 10rpx;
		width: 580rpx;
		background: #fff;
		border-radius: 10rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.search-wrapper input {
		font-size: 30rpx;
	}

	.input-placeholder {
		font-size: 30rpx;
	}

	.search-wrapper image {
		width: 36rpx;
		height: 36rpx;
		margin-left: 20rpx;
	}

	.search-wrapper input {
		margin-left: 20rpx;
		height: 100%;
		width: 480rpx;
	}

	.search-btn {
		background: #ffdf00;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.listBgView {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		justify-content: space-between;

		.tab {
			position: relative;
			border-radius: 16rpx;
			margin-top: 5px;

			image {
				border-radius: 16rpx
			}

			.array {
				position: absolute;
				top: 18rpx;
				right: 0rpx;
				color: #FFFFFF;
				background-color: rgba(0, 0, 0, 0.4);
				padding: 0rpx 12rpx 0 16rpx;
				border-radius: 20rpx 0 0 20rpx;
				font-size: 14px
			}
		}

		.array .item_text {
			font-size: 12px;
			font-weight: 200;
			margin-top: 10rpx;
		}

		.tagb {
			background: #fff;
			width: 100%;
			margin-top: 20px
		}

		.tagss {
			font-size: 14px;
			color: #909399;
			line-height: 40rpx;
			padding: 0 20rpx;
			margin-right: 10rpx;
			white-space: nowrap
		}

		.tag-actives {
			color: #333333;
			animation: tiaobig 0.8s ease-in-out alternate infinite;
			animation-iteration-count: 1;
			font-weight: 600
		}

		.tags {
			font-size: 14px;
			color: #909399;
			border-radius: 40rpx;
			line-height: 50rpx;
			height: 50rpx;
			text-align: center;
			margin-right: 20rpx;
			padding: 0 20rpx 0rpx 0rpx;
			white-space: nowrap
		}

		.tags:after {
			content: '';
			width: auto;
			min-width: 20px;
			height: 4px;

			border-radius: 10px;
			display: block;
			margin-top: 1px;
		}

		.tag-active:after {
			content: '';
			width: auto;
			min-width: 20px;
			height: 4px;
			background: #ffdf00;
			border-radius: 10px;
			display: block;
			margin-top: 1px;
		}

	}
	.aui-palace-grid-icon {
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}
	
	.aui-palace-grid-icon img {
		display: block;
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 14px;
	}
	
	.aui-palace-grid-text {
		display: block;
		text-align: center;
		color: #333;
		font-size: 12px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-top: 5px;
	}
	
	.aui-palace-grid-text h2 {
		font-size: 12px;
		font-weight: normal;
		color: #464646;
	}
	
	
	@-webkit-keyframes animloader61 {
		0% {
			height: 48px;
		}
	
		100% {
			height: 4.8px;
		}
	}
	
	@keyframes animloader61 {
		0% {
			height: 48px;
		}
	
		100% {
			height: 4.8px;
		}
	}
	
	@-webkit-keyframes animloader61m {
		0% {
			height: 40px;
			transform: translateY(0);
		}
	
		100% {
			height: 10px;
			transform: translateY(30px);
		}
	}
	
	@keyframes animloader61m {
		0% {
			height: 40px;
			transform: translateY(0);
		}
	
		100% {
			height: 10px;
			transform: translateY(30px);
		}
	}
	
	.loader-61 {
		width: 8px;
		height: 40px;
		border-radius: 4px;
		display: inline-block;
		position: relative;
		background: currentColor;
		color: #ffdf00;
		-webkit-animation: animloader61 0.3s 0.3s linear infinite alternate;
		animation: animloader61 0.3s 0.3s linear infinite alternate;
	}
	
	.loader-61::after,
	.loader-61::before {
		content: "";
		width: 8px;
		height: 40px;
		border-radius: 4px;
		background: currentColor;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 20px;
		-webkit-animation: animloader61 0.3s 0.45s linear infinite alternate;
		animation: animloader61 0.3s 0.45s linear infinite alternate;
	}
	
	.loader-61::before {
		left: -20px;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
	}
	
	.content {
		height: 100%;
	}
	
	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}
	
	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}
	
	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
	
	.doutuBgView {
		margin: 8px 0 8px 8px;
		display: flex;
		flex-direction: row;
	}
	
	.iconView {
		width: calc((100vw - 5*8px)/4);
		height: calc((100vw - 5*8px)/4);
		margin-right: 8px;
		border-radius: 8px;
		background-color: #FDEFB766;
	}
	
	.doutuTitleBgView {
		padding: 0 12px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.itemListBgView {
		padding-top: 20rpx;
	
	}
</style>